const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin') //引用vue-loader模块用于其他loader在识别文件时会将vue中的script与css识别成为对应的文件从而处理代码。


module.exports = {


    mode: 'none', //工作模式，可选值有none(原始) / development (开发)/production (生产)
    //输入目录
    entry: './src/App.vue',
    //输出目录信息
    output: {
        filename: '[name]-[contenthash:8].bundle.js', //输出文件名方框中的内容用于区别分包后的文件，而hash值则为每次重新打包后生成不同的资源名称用于告诉浏览器换资源加载。
        path: path.join(__dirname, 'dist'), //输出文件路径
        // publicPath: 'dist/', //告诉webpack根目录是哪个
    },
    module: {
        rules: [ //打包规则
            {
                test: /.vue$/, //规定的文件名的正则表达式
                use: ['vue-loader'], //使用的loader
            }, {
                test: /.js$/, //规定的文件名的正则表达式
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'] //给babel设置一个执行模块，babel只是代码转换平台本身不具有转换功能
                    }
                }
            }, {
                test: /.css$/, //规定的文件名的正则表达式
                use: ['style-loader', 'css-loader'], //使用的loader
            }, {
                test: /.html$/, //规定的文件名的正则表达式
                use: {
                    loader: 'html-loader',
                }, //使用的loader
            },

        ]
    },

    devtool: 'source-map',
    plugins: [
        new CleanWebpackPlugin(),


    ]






}